<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta content="no" name="apple-mobile-web-app-capable" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, minimal-ui, viewport-fit=cover,user-scalable=no" />
    <title>房贷计算器</title>
    <!-- 本页面css文件 -->
    <link rel="stylesheet" href="/main/css/loan.css" />
    <!-- 引入公共模板 -->
    <script src="/main/js/common.js"></script>
    <script src="/main/js/utils.js"></script>
  </head>

  <body>
    <div id="loan">
      <!-- LPR解释 -->
      <van-dialog class="whatLPRShow" v-model="whatLPRShow" title="什么是LPR？">
        <article>
          <p>LPR全称贷款市场报价利率，自2019年10月8日起，新发放商业性个人住房贷款利率以最近一个月相应期限的LPR为定价基准加点行程。每月20日（遇节假日顺延），央行会公布最近一个月期限的LPR数值公众可在央行网站查询。</p>
          <table class="table table-hover" border="1" cellspacing="0">
            <tr>
              <td style="background-color: #efefef; width: 50%">贷款年限</td>
              <td style="background-color: #efefef; width: 50%">LPR</td>
            </tr>
            <tr>
              <td>一年</td>
              <td>一年期LPR</td>
            </tr>
            <tr>
              <td>一至五年</td>
              <td>银行自主选择一年期或五年期LPR</td>
            </tr>
            <tr>
              <td>五年以上</td>
              <td>五年期LPR</td>
            </tr>
          </table>
        </article>
        <van-button plain type="info" @click="gotIt" color="#8d39d5">知道了</van-button>
      </van-dialog>
      <!-- --------------------------插件分隔符------------------------------------>

      <!-- loan header start -->
      <header class="loan-header">
        <van-tabs v-model="loanType" color="#8d39d5" @change="tabChange">
          <van-tab title="商业贷款" :name="1"></van-tab>
          <van-tab title="公积金贷款" :name="2"></van-tab>
          <van-tab title="组合贷款" :name="3"></van-tab>
        </van-tabs>
      </header>
      <!-- loan header end -->

      <!-- loan section start -->
      <section class="loan-section">
        <ul class="loan-section-business">
          <!-- 还款方式 -->
          <li class="loan-section-business__item">
            <div class="item-l"><span class="title">还款方式</span></div>
            <div class="item-r">
              <div class="item-r-checkbox">
                <van-radio-group v-model="dueType" direction="horizontal" checked-color="#8d39d5">
                  <van-radio :name="1">等额本息</van-radio>
                  <van-radio :name="2">等额本金</van-radio>
                </van-radio-group>
              </div>
            </div>
          </li>
          <!-- 计算方式 -->
          <li class="loan-section-business__item" v-if="loanType===1">
            <div class="item-l"><span class="title">计算方式</span></div>
            <div class="item-r">
              <div class="item-r-checkbox">
                <van-radio-group v-model="computerType" direction="horizontal" checked-color="#8d39d5">
                  <van-radio :name="1">按贷款总额</van-radio>
                  <van-radio :name="2">按单价</van-radio>
                </van-radio-group>
              </div>
            </div>
          </li>
          <!-- 商业贷款总额 -->
          <li class="loan-section-business__item" v-if="!switchComputerType && loanType!==2">
            <div class="item-l"><span class="title">商业贷款总额</span></div>
            <div class="item-r">
              <div class="item-r-input">
                <input class="input" type="number" style="font-size: 16px !important" v-model="loanTotalPrice" @input="numberFilter('loanTotalPrice',loanTotalPrice,$event,$root)" placeholder="请输入商业贷款总额" />
                <span class="addition">万元</span>
              </div>
            </div>
          </li>

          <!-- 单价 -->
          <li class="loan-section-business__item" v-if="switchComputerType && loanType!==2">
            <div class="item-l"><span class="title">单价</span></div>
            <div class="item-r">
              <div class="item-r-input">
                <input class="input" type="number" style="font-size: 16px !important" v-model="unitPrice" @input="numberFilter('unitPrice',unitPrice,$event,$root)" placeholder="请输入单价" />
                <span class="addition">元/m²</span>
              </div>
            </div>
          </li>

          <!-- 面积 -->
          <li class="loan-section-business__item" v-if="switchComputerType && loanType!==2">
            <div class="item-l"><span class="title">面积</span></div>
            <div class="item-r">
              <div class="item-r-input">
                <input class="input" type="number" style="font-size: 16px !important" v-model="area" @input="numberFilter('area',area,$event,$root)" placeholder="请输入面积" />
                <span class="addition">m²</span>
              </div>
            </div>
          </li>

          <!-- 首付比例 -->
          <van-cell is-link @click="chooseDownPayment" class="down-payment" v-if="switchComputerType && loanType!==2">
            <span>首付</span>
            <span>{{downPaymentScaleTitle}}成</span>
          </van-cell>
          <van-popup v-model="downPaymentShow" position="bottom" class="down-payment-popup">
            <van-picker show-toolbar :columns="scaleListData" @confirm="downPaymentConfirm" @cancel="downPaymentCancel" @change="downPaymentChange" default-index="1" />
          </van-popup>

          <!-- 贷款期限 -->
          <li class="loan-section-business__item loan-section__item_time" v-if="loanType!==2">
            <div class="title-top">
              <span class="title-l">贷款期限</span>
              <span class="title-r">{{loanTimeLength}}年({{loanTimeLength*12}}期)</span>
            </div>
            <div class="item-slide">
              <div class="slide">
                <van-slider v-model="loanTimeLength" active-color="#8d39d5" :step="1" :min="1" :max="30" :button-size="15" />
              </div>
              <div class="time" style="display: block">{{loanTimeLength}}年</div>
            </div>
          </li>
          <!-- 利率方式 -->
          <li class="loan-section-business__item" v-if="loanType!==2">
            <div class="item-l"><span class="title">利率方式</span></div>
            <div class="item-r">
              <div class="item-r-select">
                <span class="item-r-checkbox__title" @click="chooseLPRType">{{selectLPRTitle==0 ? '按最新LPR':'按旧版基准利率'}}</span>
                <van-icon name="arrow" color="#999" size="16px" />
              </div>
            </div>
          </li>
          <!-- LPR -->
          <li class="loan-section-business__item" v-if="loanType!==2 && !oldRateShow">
            <div class="item-l">
              <span class="title">LPR </span>
              <van-icon size="16px" name="question-o" @click="whatLPRShow=!whatLPRShow" />
            </div>
            <div class="item-r">
              <div class="item-r-input">
                <input class="input" type="number" style="font-size: 16px !important" v-model="loanLPR" @input="numberFilter('loanLPR',loanLPR,$event,$root)" placeholder="请输入利率" />
                <span class="addition">%</span>
              </div>
            </div>
          </li>
          <!-- 基点 -->
          <li class="loan-section-business__item" v-if="loanType!==2 && !oldRateShow">
            <div class="item-l"><span class="title">基点</span></div>
            <div class="item-r">
              <div class="item-r-input">
                <input class="input" type="number" style="font-size: 16px !important" v-model="loanBase" @input="numberFilter('loanBase',loanBase,$event,$root)" placeholder="请输入基点" />
                <span class="addition">BP‱</span>
              </div>
            </div>
          </li>
          <!-- 新版利率 -->
          <li class="loan-section-business__item" v-if="loanType!==2 && !oldRateShow">
            <div class="item-l"><span class="title">利率</span></div>
            <div class="item-r">
              <div class="item-r-checkbox">{{loanLPR}}% + {{loanBase}}‱ = {{Math.round((Number(loanLPR)+Number(loanBase)/100)*100)/100 }}%</div>
            </div>
          </li>

          <!-- 旧版利率 -->
          <van-cell is-link @click="routerLinkClick" class="down-payment" v-if="loanType!==2 && oldRateShow"> <span>贷款利率</span><span>{{oldLoanLPR}}%</span></van-cell>

          <!-- 公积金贷款方式 -->
          <!-- 公积金贷款总额 -->
          <li class="loan-section-business__item" v-if="loanType!==1">
            <div class="item-l"><span class="title">公积金贷款总额</span></div>
            <div class="item-r">
              <div class="item-r-input">
                <input class="input" type="number" style="font-size: 16px !important" v-model="accumulationFundTotalPrice" @input="numberFilter('accumulationFundTotalPrice',accumulationFundTotalPrice,$event,$root)" placeholder="请输入公积金贷款总额" />
                <span class="addition">万元</span>
              </div>
            </div>
          </li>
          <!-- 公积金期限 -->
          <li class="loan-section-business__item loan-section__item_time" v-if="loanType!==1">
            <div class="title-top">
              <span class="title-l">贷款期限</span>
              <span class="title-r">{{accumulationFundtimeLength}}年({{accumulationFundtimeLength*12}}期)</span>
            </div>
            <div class="item-slide">
              <div class="slide">
                <van-slider v-model="accumulationFundtimeLength" active-color="#8d39d5" :step="1" :min="1" :max="30" :button-size="15" />
              </div>
              <div class="time" style="display: block">{{accumulationFundtimeLength}}年</div>
            </div>
          </li>
          <!-- 公积金贷款利率 -->
          <van-cell is-link @click="routerSwitch" class="down-payment" v-if="loanType!==1"> <span>公积金贷款利率</span><span>{{accumulationFundLoanTitle}}%</span></van-cell>
        </ul>

        <div class="confirm-button">
          <van-button type="info" @click="startComputer" color="#8d39d5">开始计算</van-button>
        </div>
      </section>
      <!-- loan section end -->

      <!-- loan footer start -->
      <footer class="loan-footer">
        <div class="loan-footer__article">
          <p class="article">当前年限基础利率：商业贷款4.9%,公积金贷款3.25%。</p>
          <p class="article">等额本息： 每月按相等的金额偿还贷款本息，其中本金逐月递增，利息逐月递减，月还款金额不变</p>
          <p class="article">等额本金： 每月按相等的金额偿还贷款本金，其中本金保持相同，利息逐月递减，月还款金额越来越少</p>
        </div>
      </footer>

      <!-- loan footer end -->

      <!-- 隐藏插件 -->
      <!-- ActionSheet -->
      <van-action-sheet v-model="LPRShow" :actions="actions" cancel-text="取消" close-on-click-action close-on-click-overlay safe-area-inset-bottom @cancel="LPRShowCancel" @select="LPRShowSelect" />
    </div>
    <script src="main/js/loan.js"></script>
  </body>
</html>
